<template>
  <div class="txtFile">
    <p style="white-space: pre-line">{{ txtContent }}</p>
  </div>
</template>
<script>
import { getTxtFile } from "@/api/KnowledgeBaseManagement";
export default {
  components: {},
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      txtContent: "",
    };
  },
  watch: {
    info: {
      handler(newValue, oldValue) {
        this.info.file_url && this.getFileConents();
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    console.log(this.info, "wenji");
  },
  methods: {
    getFileConents() {
      let url = "/knowledge_base" + this.info.file_url.split("/knowledge_base")[1];
      getTxtFile({
        url,
      })
        .then((result) => {
          // console.log(result);
          this.txtContent = result;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.txtFile {
  height: calc(100% - 40px);
  overflow: auto;
  p {
    font-size: 16px;
    text-align: left;
  }
}
</style>
